<template>
	<view style="padding-bottom: 120rpx;">
		<view style="border-radius: 20rpx;margin: 10rpx 20rpx 10rpx">
			<u-swiper height="150" :list="swiperList" indicator :autoplay="true" circular @click="swiperClick"></u-swiper>
		</view>
		
		<view style="display: flex;flex-direction: column;border-radius: 20rpx;margin: 10rpx 20rpx 10rpx;background-color: #fff;padding: 20rpx;">
			<view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;">
				<view style="display: flex;flex-direction: column;">
					<view style="font-size: 22rpx;color: #909399;">
						店铺名称
					</view>
					<view style="font-size: 34rpx;font-weight: bold;">
						{{shopDetail.storeName}}
					</view>
				</view>
				<view style="display: flex;justify-content: flex-end;flex: 1;">
					<view style="margin-left: 20rpx;display: flex;flex-direction: row;align-items: center;" @click="collectClick()">
						<u-icon name="star-fill" :color="status.storeCollect?'#20C3FE':'#7c7c7c'" size="18"></u-icon>
						<text style="color: #909399;">{{shopDetail.collect}}</text>
					</view>
					<view style="margin-left: 20rpx;display: flex;flex-direction: row;align-items: center;">
						<u-icon name="eye-fill" color="#20C3FE" size="18"></u-icon>
						<text style="color: #909399;">{{shopDetail.lookNum}}</text>
					</view>
					<view style="margin-left: 20rpx;display: flex;flex-direction: row;align-items: center;" @click="clickZan()">
						<u-icon name="thumb-up-fill" :color="status.storeZan?'#20C3FE':'#808080'" size="18"></u-icon>
						<text style="color: #909399;">{{shopDetail.up}}</text>
					</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
				<view style="font-size: 22rpx;color: #909399;">营业时间</view>
				<view style="font-size: 28rpx;">{{shopDetail.businessHours}}</view>
			</view>
			<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
				<view style="font-size: 22rpx;color: #909399;">店铺地址</view>
				<view style="font-size: 28rpx;">{{shopDetail.storeAddress}}</view>
			</view>
			<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
				<view style="font-size: 22rpx;color: #909399;">联系电话</view>
				<view style="font-size: 28rpx;">{{shopDetail.telephone}}</view>
			</view>
			<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
				<view style="font-size: 22rpx;color: #909399;">店铺介绍</view>
				<view style="font-size: 28rpx;">{{shopDetail.storeIntroduction}}</view>
			</view>
		</view>

		<!-- 列表 -->
		<view style="margin: 0 20rpx;border-radius: 20rpx;background-color: #fff;overflow: hidden;">
			<view class="recommend-list">
				<u-icon name="heart" color="#20C3FE"></u-icon>
				<text style="margin-left: 10rpx;">同类推荐</text>
			</view>
			<view v-for="(item,index) in recommendList" :key="index"
			@click="cardClick(item.id)"
				style="display: flex;flex-direction: column;">
				<view style="display: flex;justify-content: center;margin-bottom: 20rpx;padding: 14rpx;flex-direction: row;">
					<view style="width: 260rpx;height: 190rpx;border-radius: 20rpx;overflow: hidden;">
						<image style="width: 100%;height: 100%;" :src="imgOne(item.pic)" mode="aspectFill">
						</image>
					</view>
					<view style="width: 100%;margin-left: 20rpx;display: flex;flex-direction: column;">
						<view style="font-size: 28rpx;margin-bottom: 12rpx;font-size: 28rpx;">
							{{item.storeName}}
						</view>
						<view
							style="margin-bottom: 12rpx;font-size: 26rpx;color: #909399;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">
							{{item.businessHours}}
						</view>
						<view style="align-self: flex-start;margin-bottom: 12rpx;">
							<text class="etcString" style="background-color: #FF226B;line-height: 40rpx;">
							{{item.storeAddress}}
							</text>
						</view>
						<view style="display: flex;justify-content: flex-end;">
							<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{item.createTime}}</view>
							<view style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
								<u-icon color="#20C3FE" name="eye"></u-icon>
								<text>{{item.lookNum}}</text>
							</view>
							<view style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
								<u-icon color="#ff5500" name="thumb-up"></u-icon>
								<text>{{item.up==null||item.up == ''?'0':item.up}}</text>
							</view>
							<view style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
								<u-icon name="star" color="#ffaa00"></u-icon>
								<text>{{item.collect}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-line v-if="index != recommendList.length - 1" dashed></u-line>
				

			</view>
		</view>
		<!-- 底部栏 -->
		<view class="bottom">
			<view class="addWe" @click="addAdminShow=true">
				<u-icon name="plus-circle-fill"></u-icon>
				<text>入驻</text>
			</view>
			<view class="callPhoneBottom" @click="call(shopDetail.telephone)">
				拨打电话
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- 联系方式弹出层 -->
		<u-popup :show="addAdminShow" @close="close"  mode="center" :round="10" :closeable="true" >
			<view class="addAdminShow">
				<view class="wen-zi">
					<text>添加平台管理微信</text>
				</view>
				<view class="wen-zi">
					<text>18177477706</text>
				</view>
				<u-button class="btn-copy" type="primary" text="复制微信号" @click="copy" :round="10"></u-button>
			</view>	
		</u-popup>
	</view>

</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getShopById,
		storeClickZan,
		getRecommendList,
		storeZanCancel,
		storeZan,
		getStoreUserStatus,
		storeCollectCancel,
		storeCollect
	} from '../../config/api.js'
	// const baseUrl = 'http://localhost:8080'
	export default {
		data() {
			return {
				id: '',
				shopDetail: {},
				swiperList: [],
				recommendList: [],
				tags: '',
				status: '',
				addAdminShow:false,
				phone: '18177477706',
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.init();
		},
		onShow(){
			this.init();
		},
		computed: {
			...mapGetters(['getIsLogin','getBaseUrl'])
		},
		methods: {
			init() {
				getShopById({
					id: this.id
				}).then(res => {
					this.shopDetail = res.data.data;
					this.tags = res.data.data.tags;
					this.s = this.shopDetail.pic.split(",");
					this.swiperList = this.s.map((item, index) => {
						return this.getBaseUrl + item
					});
					
					this.getRecommendList()
				})
				//TODO
				if (this.getIsLogin) {
					getStoreUserStatus({
						id: this.id
					}).then(res => {
						console.log(res, "status");
						this.status = res.data.data
					})
				}
			},
			// 入驻弹窗关闭
			close() {
			  this.addAdminShow = false
			  // console.log('close');
			},
			// 点击复制
			copy() {
				uni.setClipboardData({
					data: this.phone,
					success: () => {
						uni.showToast({
							title: '复制成功',
							message: '复制成功',
							type: 'success'
						})
					}
				})
			},
			// 获取推荐列表
			getRecommendList() {
				getRecommendList({
					id: this.id,
					tags: this.tags
				}).then(res => {
					this.recommendList = res.data.data.map(item => {
						return {
							id: item.id,
							storeName: item.storeName,
							storeIntroduction: item.storeIntroduction,
							storeAddress: item.storeAddress,
							pic: this.getBaseUrl + item.pic,
							storeManeger: item.storeManeger,
							telephone: item.telephone,
							businessHours: item.businessHours,
							lookNum: item.lookNum,
							telephone: item.telephone,
							tags: item.tags,
							createTime: item.createTime,
							up: item.up
						}
					})
				})
			},
			// 点击图片
			swiperClick(i) {
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.swiperList
				})
			},
			
			// 取卡片对象的第一张图片
			imgOne(pic) {
				let src = pic.split(",")[0];
				return src
			},
			// 进入推荐详情界面
			cardClick(id) {
				uni.navigateTo({
					url: `/pages/shop/shopDetail?id=${id}`
				})
			},
			// 收藏
			collectClick(){
				if(this.getIsLogin){
					if(this.status.storeCollect){
						// 取消收藏
						storeCollectCancel({storeId:this.id}).then(res=>{
							this.status.storeCollect=0
							this.shopDetail.collect--
							this.$refs.uToast.show({
								type:'warning',
								message:'取消收藏成功'
							})
						})
					}else{
						// 收藏
						storeCollect({collectType:'推荐店铺',storeId:this.id}).then(res=>{
							this.status.storeCollect=1
							this.shopDetail.collect++
							this.$refs.uToast.show({
								type:'success',
								message:'收藏成功'
							})
						})
					}
				}else{
					this.$refs.uToast.show({
						type:'warning',
						message:'请先登录'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}
				
			},
			// 点赞
			clickZan() {
				// this.status.societyZan 默认1是真 0是假
				if(this.getIsLogin){
					if (this.status.storeZan) {
						console.log("取消店铺点赞");
						//取消点赞
						storeZanCancel({
							id: this.id
						}).then(res => {
							if (res.data.msg == "取消点赞") {
								this.shopDetail.up--;
								this.status.storeZan = 0;
								this.$refs.uToast.show({
									type: 'warning',
									message: '取消点赞成功'
								})
							}
						})
					} else {
						console.log("点赞店铺");
						//点赞
						storeZan({
							id: this.id
						}).then(res => {
							if (res.data.msg == "点赞成功") {
								this.shopDetail.up++;
								this.status.storeZan = 1;
								this.$refs.uToast.show({
									type: 'success',
									message: '点赞成功'
								})
							}
						})
					}
				}else{
					this.$refs.uToast.show({
						type:'warning',
						message:'请先登录'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}
				

			},
			// 打电话
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		}


	}
</script>

<style scoped lang="scss">
	.etcString {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 8rpx;
		color: #fff;
	}
	
	// 底部
	.bottom {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between; // 水平居中
		align-items: center; // 垂直居中
		width: 100%;
		height: 80rpx;
		border: #f4f4f4 1rpx solid;
		background-color: #fff;
	
		.addWe {
			display: flex;
			justify-content: center;
			height: 80rpx;
			flex: 1;
			text-align: center;
			line-height: 80rpx;
	
		}
	
		.callPhoneBottom {
			height: 80rpx;
			line-height: 80rpx;
			flex: 1;
			background-color: #20C3FE;
			color: #fff;
			text-align: center;
		}
	}
	.addAdminShow{
		text-align: center;
		height: 300rpx;
		width: 400rpx;
		margin: 30rpx;
		margin-top: 80rpx;
		.wen-zi{
			margin-bottom: 20rpx;
		}
		
		.btn-copy{
			width: 140rpx;
		}
	}
	.recommend-list {
		display: flex;
		color: #20C3FE;
		font-size: 30rpx;
		justify-content: center;
		background-color: #FFF;
		align-items: center;
		height: 60rpx;
	}
</style>